<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /**
       * 异步做法1
       */
      // console.log(123)
      // // 在 JavaScript 中通过 queueMicrotask() 使用微任务
      // // 创建一个微任务
      // queueMicrotask(() => {
      //   console.log(456)
      // })
      // console.log(789)

      // // out: 123 789 456

      /**
       * 异步做法2
       */
      console.log(123)
      // MutationObserver 接口提供了监视对 DOM 树所做更改的能力。
      const obs = new MutationObserver(() => {
        console.log('你监听的dom改变了')
      })
      const divNode = document.createElement('div')
      // 监听dom下的子节点，如果修改了，就会执行上方回调
      obs.observe(divNode, { childList: true })
      divNode.innerHTML = '<p>文本</p>'
      console.log(789)

      // out: 123 789 你监听的dom改变了
    </script>
  </body>
</html>
